

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
</head>
<body>
<div ng-controller="EventController">
    Root作用域<tt>MyEvent</tt> count: {{count}}
    <ul>
        <li ng-repeat="i in [1]" ng-controller="EventController">
            <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
            <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
            <br>
            Middle作用域<tt>MyEvent</tt> count: {{count}}
            <ul>
                <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                    Leaf作用域<tt>MyEvent</tt> count: {{count}}
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">


    function EventController($scope) {
        $scope.count = 0;
        $scope.$on('MyEvent', function() {
            $scope.count++;
        });
    }


</script>
</html>


<!--$emit 和 $broadcast 是直接被写在 html 模版中的，而不是写在控制器的 JavaScript代码中，因为这两个方法是直接在 $scope 中就有的，-->
<!--emitted ：从子级作用域往上发射到父级作用域-->
<!--broadcasted ：从父级作用域广播至子级 scope-->
